<template>
  <div class="bg-f2">
    <div class="bg-f2 bg-fff">
      <div class="addMargin">
        <el-button class="increased btnSizeStyle" icon="el-icon-plus" @click="Addrevamp('新增')">添加</el-button>
      </div>
      <el-drawer title="我是标题" class="drawerScroll" :visible.sync="increased" :with-header="false" :wrapperClosable="false">
        <div class="addUer_title">
          <span>{{ title }}</span>
          <i class="el-icon-close addUer_icon" @click="offDrawer('ruleForm')"></i>
        </div>
        <el-form :model="ruleForm" :rules="rules" class="drawerContent" ref="ruleForm" label-width="130px">
          <el-row>
            <el-col :span="23">
              <el-form-item label="名称：" prop="flmc">
                <el-input v-model.trim="ruleForm.flmc" clearable placeholder="填写字典姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="备注：">
                <el-input v-model.trim="ruleForm.bz" :maxlength="100" resize="none" show-word-limit type="textarea" :rows="4" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="forms_fooer">
            <el-button class="btnSizeStyle" @click="offDrawer('ruleForm')">取 消</el-button>
            <el-button type="primary" class="btnSizeStyle" @click="submitForm('ruleForm')" v-preventReClick>确 定</el-button>
          </div>
        </el-form>
      </el-drawer>
      <el-card>
        <el-table
          stripe
          border
          highlight-current-row
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          :data="organizationList"
          style="width: 100%"
          :default-sort="{ prop: 'deviceName' }"
          v-loading="tableLoad"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
          <el-table-column prop="flmc" label="名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="字典类别">
            <template>
              <el-tag class="typeBtn" size="medium">组织机构</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="bz" label="备注"></el-table-column>
          <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
          <el-table-column prop="tjsj" label="添加时间" min-width="150"></el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-button type="text" class="operateBtn" @click="Addrevamp('编辑', scope.row)">编辑</el-button>
              <span class="operation" v-show="scope.row.scbs - '' === 0 ? true : false"></span>
              <el-button type="text" v-show="scope.row.scbs - '' === 0 ? true : false" class="operateBtn color_f56f6f" @click="deleteItem(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
          <span>您确定要删除吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" class="btnSizeStyle">取 消</el-button>
            <el-button type="primary" @click="deleteItem2" v-preventReClick class="btnSizeStyle">确 定</el-button>
          </span>
        </el-dialog>
        <div class="pageFloat">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="countPage"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { pinT } from '../../utils/allUrl.js'
// import { endLoading } from '../../utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data: function () {
    return {
      organizationList: [], // 机构类型字典数据源
      dialogVisible: false, // 删除
      deleteId: '', // 删除id
      title: '', // 添加修改标题
      id: '', // 修改上传ID
      increased: false, // 添加编辑机构对话框
      currentPage: 1, // 当前显示页
      countPage: 0, // 总页数
      pageSize: 10, // 显示页数
      ruleForm: {
        flmc: '',
        bz: '',
      },
      rules: {
        flmc: [
          { required: true, message: '请输入机构类型', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          { pattern: /^[\u4E00-\u9FA5]+$/g, message: '请输入中文', trigger: 'blur' },
          // { pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' },
        ],
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.organizationList = []
          // this.countPage = 0
          this.tableMessage = tableMessageText
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.grtList()
  },
  methods: {
    // 获取数据
    grtList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${pinT}jglx/list`, params)
      switch (res.code) {
        case '0000':
          this.organizationList = res.data.list
          this.countPage = res.data.countList
          break
        default:
          this.organizationList = []
          this.countPage = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.grtList()
    },
    handleCurrentChange(newnum) {
      this.currentPage = newnum
      this.grtList()
    },
    deleteItem(id) {
      this.dialogVisible = true
      this.deleteId = id
    },
    async deleteItem2() {
      this.dialogVisible = false
      const params = new URLSearchParams()
      params.append('id', this.deleteId)
      const { data: res } = await this.$http.post(`${pinT}jglx/delete`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.grtList()
      return this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
    },
    offDrawer(ruleForm) {
      this.$refs.ruleForm.resetFields()
      this.increased = false
    },
    submitForm(ruleForm) {
      const { flmc, bz } = this.ruleForm
      const params = new URLSearchParams()
      if (this.id) {
        params.append('id', this.id)
      }
      params.append('flmc', flmc)
      params.append('bz', bz)
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          if (this.title === '新增') {
            const { data: res } = await this.$http.post(`${pinT}jglx/create`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.increased = false
            this.grtList()
          } else {
            const { data: res } = await this.$http.post(`${pinT}jglx/update`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.increased = false
            this.organizationList = []
            this.grtList()
          }
        } else {
          // return this.$message({
          //   type: 'error',
          //   message: '请填写正确的信息',
          //   center: true,
          // })
        }
      })
    },
    Addrevamp(title, scope) {
      if (scope) {
        this.ruleForm.flmc = scope.flmc
        this.ruleForm.bz = scope.bz
        this.id = scope.id
      } else {
        this.ruleForm.flmc = ''
        this.ruleForm.bz = ''
      }
      this.title = title
      this.increased = true
    },
    lp: function () {
      console.log('23')
    },
  },
}
</script>
<style lang="scss" scoped>
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1.5px solid #b3b3b3;
}
.addMargin {
  // height: 55px;
  // line-height: 67px;
  margin-bottom: 15px;
  .increased {
    background: rgba(103, 194, 58, 1);
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
}
.el-drawer {
  .addUer_title {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
    > span {
      font-size: 18px;
      font-weight: 600;
    }
    .addUer_icon {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      flex-flow: column;
      justify-content: center;
      cursor: pointer;
    }
  }
  .el-row {
    margin-top: 30px;
  }
  .forms_fooer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
    height: 61px;
    line-height: 61px;
    border-top: 1px solid #ededed;
    background-color: #fff;
    .users_btn {
      padding: 0 10px;
      height: 36px;
    }
  }
}
.typeBtn {
  background: #e8f3ff;
  border: 1px solid #c2dfff;
  color: #1989fa;
}
.pageFloat {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 48px;
}
</style>
